﻿@{
    ViewBag.Title = "JQuery测试";
}

<style>
    * {
        font-family: Verdana;
        font-size: 96%;
    }

    label {
        width: 10em;
        float: left;
    }

        label.error {
            float: none;
            color: red;
            padding-left: .5em;
            vertical-align: top;
        }

    p {
        clear: both;
    }

    em {
        font-weight: bold;
        padding-right: 1em;
        vertical-align: top;
    }
</style>
<div class="jumbotron">
    <div class="panel panel-default">
        <div class="panel-heading">表单验证插件-Validation</div>
        <div class="panel-body">
            <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
            <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
            <script src="~/Scripts/jquery-1.10.2.min.js"></script>
            <script src="~/Scripts/jquery.color.js"></script>
            <script type="text/javascript">
                $(function () {
                    //查看第一个div的color样式值
                    // alert($("#c1").color());
                    alert($("#c1").color() + "\n 返回字符串，说明此参数可用");

                    //把所有的div的字体颜色都设为红色
                    alert($("#testColor div").color("red") + "\n返回object证明得到的是jQuery对象。");

                    $("#testColor div").click(function () {
                        var color = $(this).text();
                        $("#testColor div").color(color); //设置所有的div的字体颜色
                    })
                })
            </script>
            <script>
                                                //$.validator.setDefaults({
                                                //    submitHandler: function () {
                                                //        alert("提交事件!");
                                                //    }
                                                //});
                                                //$().ready(function () {
                                                //    $("#commentForm").validate();
                                                //});
            </script>
            <form class="cmxform" id="commentForm" method="get" action="">
                <fieldset>
                    <legend>输入您的名字，邮箱，URL，备注。</legend>
                    <p>
                        <label for="cname">Name (必需, 最小两个字母)</label>
                        <input id="cname" name="name" minlength="2" type="text" required>
                    </p>
                    <p>
                        <label for="cemail">E-Mail (必需)</label>
                        <input id="cemail" type="email" name="email" required>
                    </p>
                    <p>
                        <label for="curl">URL (可选)</label>
                        <input id="curl" type="url" name="url">
                    </p>
                    <p>
                        <label for="ccomment">备注 (必需)</label>
                        <textarea id="ccomment" name="comment" required></textarea>
                    </p>
                    <p>
                        <input class="submit" type="submit" value="提交">
                    </p>
                </fieldset>
            </form>

            <span></span>

        </div>
    </div>


    <div class="panel panel-default">
        <div class="panel-heading">jquery自定义扩展</div>
        <div class="panel-body" id="testColor">

            <div style="color:red" id="c1">red</div>
            <div style="color:blue">blue</div>
            <div style="color:green">green</div>
            <div style="color:yellow">yellow</div>



        </div>
    </div>

</div>



